<template>
  <div class="design-plan-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <el-date-picker
            v-model="searchDate"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            @keydown.native.enter="handleSearch">
          </el-date-picker>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
        <div class="search-item">
          <el-button v-if="hasTabDownload" type="primary" @click="handleModelDownLoad">
            模版下载
          </el-button>
          <el-button v-if="hasTabUpload" type="primary" @click="uploadVisible = true">
            上传
          </el-button>
          <el-button v-if="hasTabDetail" type="primary" @click="historyVisible = true">
            历史记录
          </el-button>
        </div>
      </div>
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        row-key="uuid">
        <el-table-column label="序号" type="index" width="120"></el-table-column>
        <el-table-column label="工作内容" prop="job_content"></el-table-column>
        <el-table-column label="时间">
          <template slot-scope="scope">
            {{ scope.row.start_time
              ? $moment(scope.row.start_time).format('yyyy-MM-DD HH:mm:ss')
              : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="截止日期">
          <template slot-scope="scope">
            {{ scope.row.end_time
              ? $moment(scope.row.end_time).format('yyyy-MM-DD HH:mm:ss')
              : ''
            }}
          </template>
        </el-table-column>
<!--        <el-table-column label="操作">-->
<!--          <template slot-scope="scope">-->
<!--            <span class="btn" @click="handleDownLoad(scope.row)">下载</span>-->
<!--            <span class="btn" @click="handleDelete(scope.row)">删除</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </main>
    <upload-model
      :visible="uploadVisible"
      :loading="btnLoading"
      @submit="handleUpload"
      @cancel="uploadVisible = false">
    </upload-model>
    <upload-history
      :visible="historyVisible"
      :loading="historyLoading"
      :tableData="historyData"
      :total="historyTotal"
      :pageSize="historyPageSize"
      :pageNo="historyPageNo"
      :handleSizeChange="handleHistorySizeChange"
      :handleCurrentChange="handleHistoryCurrentChange"
      :deleteFn="handleDelete"
      @cancel="historyVisible = false">
    </upload-history>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import UploadModel from '@/components/project/technologyManage/uploadModel';
import UploadHistory from '@/components/project/technologyManage/uploadHistory';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '技术管理',
        },
        {
          name: '设计计划'
        }
      ],
      // 列表数据
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      hasSearch: false,
      searchDate: [],
      uploadVisible: false,
      btnLoading: false,
      historyVisible: false,
      historyLoading: false,
      historyData: [],
      historyTotal: 0,
      historyPageNo: 1,
      historyPageSize: 10
    };
  },
  computed: {
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  watch: {
    historyVisible(value) {
      if (value) {
        this.getHistoryTableData();
      }
    }
  },
  async created() {
    this.getTableData();
  },
  components: {
    Breadcrumb,
    UploadModel,
    UploadHistory
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        page: String(this.pageNo),
        limit: String(this.pageSize),
        project_id: this.projectId
      };
      if (this.hasSearch && this.searchDate && this.searchDate.length) {
        params.start_time = this.searchDate[0];
        params.end_time = this.searchDate[1];
      }
      const { success, data } = await this.$Model.getDesignPlan(params);
      this.tableLoading = false;
      if (success && Array.isArray(data.data)) {
        this.total = data.count ? Number(data.count) : 0;
        this.tableData = data.data;
      }
    },
    /**
     * 获取历史列表数据
     */
    async getHistoryTableData() {
      this.historyLoading = true;
      const params = {
        page: String(this.pageNo),
        limit: String(this.pageSize),
        project_id: this.projectId
      };
      const { success, data } = await this.$Model.getHistoryDesignPlan(params);
      this.historyLoading = false;
      if (success && Array.isArray(data.data)) {
        this.historyTotal = data.count ? Number(data.count) : 0;
        this.historyData = data.data;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleHistorySizeChange(pageSize) {
      this.historyPageNo = 1;
      this.historyPageSize = pageSize;
      this.getHistoryTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleHistoryCurrentChange(pageNo) {
      this.historyPageNo = pageNo;
      this.getHistoryTableData();
    },
    /**
     * 搜索
     */
    handleSearch() {
      this.clear();
      this.hasSearch = !!this.searchDate && this.searchDate.length;
      this.getTableData();
    },
    // 重置
    handleRefresh() {
      this.clear();
      this.hasSearch = false;
      this.searchDate = [];
      this.getTableData();
    },
    /**
     * 模版下载
     */
    handleModelDownLoad() {
      const { protocol, host, pathname } = window.location;
      const newPathName = pathname.replace(/(\/\w+\.html)$/, '');
      window.location.href = `${protocol}//${host}${newPathName}/static/设计计划模板.xlsx`;
    },
    /**
     * 上传模版
     */
    async handleUpload({ file }) {
      if (!file) return;
      const fm = new FormData();
      fm.append('design_plan_file', file);
      fm.append('project_id', this.projectId);
      const { success } = await this.$Model.designPlanUpload(fm);
      if (success) {
        this.$message.success('上传成功');
        this.uploadVisible = false;
        this.getTableData();
      }
    },
    /**
     * 计划列表下载
     * @param row {Object}
     */
    handleDownLoad(row) {
      if (!row.url) {
        this.$message.warning('下载地址失效');
        return;
      }
      window.open(this.$checkUrl(row.url));
    },
    /**
     * 删除计划
     * @param row {Object}
     */
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteDesignPlanFile({
          uuid: row.uuid
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getTableData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .design-plan-page {
    width: 100%;
    height: 100%;
    background-color: $mainBg;
    overflow: hidden;
    main {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
      .search-container {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .table-container {
        height: calc(100% - 120px);
        /deep/ .el-table__body-wrapper {
          height: calc(100% - 50px);
          padding-bottom: 46px;
          overflow-y: auto;
          .btn {
            padding: 0 5px;
            cursor: pointer;
            color: $mainColor;
          }
        }
      }
    }
  }
</style>
